<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Vue监测数据改变的原理</title>
        <script type="text/javascript" src="../../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <h1>学校信息</h1>
            <button @click="addSchoolPhone">添加学校电话</button>
           <h2>学校名称：{{school.name}}</h2>
           <h2>学校地址：{{school.address}}</h2>
           <!-- 在没添加之前 school.phone是undefined，Vue处理undefined不会展示 -->
           <h2 v-if="school.phone">学校电话：{{school.phone}}</h2>

           <button @click="addSchoolLeader">添加学校校长</button>
           <!-- <h2 v-if="leader">校长：{{leader}}</h2> -->
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false  // 阻止Vue在启动时生成生产提示，不起作用，直接改了vue.js中的值
            
            const vm = new Vue({
                el:'#root', 
                data:{ 
                    school:{
                        name:'山东大学',
                        address:'山东济南'
                    }
                },

                methods: {
                    //给学校添加一个不存在的属性
                    addSchoolPhone(){
                        //Vue.set(目标,属性，属性值)
                        //等同与控制台 Vue.set(vm.school,'phone','131313')
                        //Vue.set(this.school,'phone','131313')
                        //等同于下面
                        this.$set(this.school,'phone','131313')
                    },
                    //和上面同样逻辑添加校长 区别是校长不在school对象里面，单独添加到data中
                    addSchoolLeader(){
                        // 这样是不允许的--目标不能是Vue实例或者根数据对象data
                        this.$set(vm,'phone','131313')
                    }
                },

            })


        </script>

        
    </body>
</html>